<template>
    <div class="home-grid">
        <van-grid :column-num="5" square :gutter="5">
            <van-grid-item v-for="list in menulist" :key="list">
                <van-image :src="list.url" />
                <span>{{ list.text }}</span>
            </van-grid-item>
        </van-grid>
    </div>
</template>

<script setup>
import menu1 from '../assets/images/menu1.png'
import menu2 from '../assets/images/menu2.png'
import menu3 from '../assets/images/menu3.png'
import menu4 from '../assets/images/menu4.png'
import menu5 from '../assets/images/menu5.png'
import menu6 from '../assets/images/menu6.png'
import menu7 from '../assets/images/menu7.png'
import menu8 from '../assets/images/menu8.png'
import menu9 from '../assets/images/menu9.png'
import menu10 from '../assets/images/menu10.png'

const menulist = [
    {text:'今日爆款',url:menu1},
    {text:'好物分享',url:menu2},
    {text:'推荐购买',url:menu3},
    {text:'购物心得',url:menu4},
    {text:'直播专区',url:menu5},
    {text:'签到中心',url:menu6},
    {text:'值得购买',url:menu7},
    {text:'每日优惠',url:menu8},
    {text:'充值中心',url:menu9},
    {text:'我的客服',url:menu10},
]
</script>

<style lang="less" scoped>
.home-grid {
    .van-image {
        width: 55%;
    }
    span{
        font-size: 12px;
    }
}
</style>